<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>注册</title>
    <link rel="stylesheet" href="../css/vant.index.css">
    <link rel="stylesheet" href="../css/iconfont.css">
    <style>
        html,
        body {
            width: 100%;
            height: 100%
        }

        body {
            background: url(../images/system_image/login_reg_bg.jpg) no-repeat top left;
            background-size: cover;
        }

        .backdrop {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: black;
            opacity: 0.8;
            z-index: 0
        }

        .wrap {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 10;
            /*background-color: #e3007f*/
        }

        .wrap .System_blank {
            width: 100%;
            height: 40px;
            /*background-color: #e3007f*/
        }

        .wrap .header {
            width: 100%;
            height: 25px;
            color: white;
            /*background-color: rgb(249, 234, 119);*/
        }

        .wrap .header .back {
            float: left;
            margin-left: 10px;
            width: 30px;
            height: 30px;
            /*background-color: rgb(249, 234, 119);*/
        }

        .wrap .header .title {
            position: absolute;
            width: 100%;
            text-align: center;
			z-index:-1;
        }

        .wrap .content {
            box-sizing: border-box;
            width: auto;
            height: auto;
            margin-left: 40px;
            margin-right: 40px;
            margin-top: 50px;
            margin-bottom: 60px;
            /*background-color: rgb(249, 234, 119);*/
        }

        .wrap .row {
            box-sizing: border-box;
            width: auto;
            height: 60px;
            border-bottom: 1px solid white;
        }

        .wrap .row .item {
            position: absolute;
            float: left;
            width: 20px;
            height: 60px;
            line-height: 60px;
            color: white;
        }

        .wrap .row .input {
            width: 70%;
            height: 60px;
            margin-left: 32px;
            line-height: 60px;
            border: none;
            outline: none;
            font-size: 16px;
            color: rgb(169, 169, 169);
            background-color: rgba(0, 0, 0, 0);
        }

        .wrap .row .code {
            position: absolute;
            float: right;
            width: 50px;
            height: 60px;
            line-height: 60px;
            background-color: rgb(249, 234, 119);
        }

        .wrap .button {
            width: auto;
            height: 40px;
            margin-top: 60px;
            background-color: rgb(249, 234, 119);
            color: rgb(62, 62, 62);
            line-height: 40px;
            text-align: center;
            border-radius: 8px;
        }

        .wrap .agreement {
            width: 210px;
            height: 40px;
            margin: 0 auto;
            margin-top: 10px;
        }

        .wrap .agreement .text1 {
            color: white;
            float: left;
        }

        .wrap .agreement .text2 {
            color: rgb(249, 234, 119);
        }

        .highlight {
            opacity: 0.7;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="wrap">
            <div class="System_blank"></div>
            <div class="header">
                <div class="title">
                    <h1>注册</h1></div>
                <div class="back"><span class="iconfont icon-to-left" tapmode="highlight" onclick="fncloseWin()"></span></div>
            </div>
            <div class="content">
                <div class="row">
                    <div class="item">
                        <span class="iconfont icon-shouji" aria-hidden="true"></span>
                    </div>
                    <input id="userid_tele" class="input" type="text" placeholder="请输入您的手机号" v-model="userId_tel">
                </div>
                <div class="row">
                    <div class="item">
                        <span class="iconfont icon-mima" aria-hidden="true"></span>
                    </div>
                    <input id="password1" class="input" type="password" placeholder="设置密码(6-20个字母或数字)">
                </div>
                <div class="row">
                    <div class="item">
                        <span class="iconfont icon-mima" aria-hidden="true"></span>
                    </div>
                    <input id="password2" class="input" type="password" placeholder="确认密码" v-model="userPassword">
                </div>
                <div class="button" tapmode="highlight" onclick="fnRegister();">确定</div>
                <div class="agreement">
                    <div class="text1">注册即视为同意</div>
                    <div class="text2">《用户服务协议》</div>
                </div>
            </div>
        </div>
        <div class="backdrop"></div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/axios.min.js"></script>
<script type="text/javascript" src="../script/SHA1.js"></script>
<script type="text/javascript" src="../script/myscript.js"></script>
<script type="text/javascript">
    // apiready = function() {};
    var app = new Vue({
        el: '#app',
        data: {
            backbtn: false,
            loginbtn: false,
            userId_tel: '',
            userPassword: ''
        },
        methods: {
            closeWin: function() {}
        }
    });

    function fnRegister() {
        var now = Date.now();
        var _AppId = $blt.getAppId();
        var _appKey = $blt.getAppKey();
        var appKey = SHA1(_AppId, "UZ", _appKey, "UZ" + now) + "." + now;
        var url = 'https://d.apicloud.com//mcm/api/user';
        var regInfo = {
            password: app.userPassword + '',
            username: app.userId_tel + '',
            blt_avatar: 'https://image.gcores.com/2d362f59-3df3-454d-a3c4-5801150d08e9.jpg',
            blt_say: '这个人很懒，什么都没说',
            blt_name: app.userId_tel,
            blt_id: app.userId_tel
        }
        //alert(JSON.stringify(regInfo));
        axios({
            method: 'post',
            url: url,
            headers: {
                'X-APICloud-AppId': _AppId,
                'X-APICloud-AppKey': appKey
            },
            data: regInfo
        }).then(function(response) {
            //alert(JSON.stringify(response));
            if(response.data.id){
              $api.setStorage('userInfo', regInfo);
              // sessionStorage.setItem("userInfo",JSON.stringify(regInfo));
              setTimeout(function(){
                alert('注册成功，id('+app.userId_tel+')，请妥善保管！');
                // this.$toast({
                //     message: '注册成功，id('+app.userId_tel+')，请妥善保管！',
                //     position: 'bottom'
                // });
                window.location.href = './login.html';
              },1000)
            }
        }).catch(function(error) {
            console.log(error);
            alert(JSON.stringify(error));
        });
    }

    function fncloseWin() {
        window.history.back(-1);
    }
</script>

</html>
